<!-- CrowdedPlace -->
<template>
  <div class="CrowdedPlace">
    <p class="CrowdedPlace_title">人员聚集场所</p>
    <div class="CrowdedPlace_box">
      <div
        class="CrowdedPlace_cont"
        :class="checked === index ? 'cur' : ''"
        v-for="(item, index) in listData"
        @click="handleIco(index, item)"
        :key="index"
      >
        <span class="CrowdedPlace-icon " :class="item.iconName"></span>
        <p class="text">
          <span :class="{ spanColor: checked === index }">{{ item.num }}</span>
          个
        </p>
        <p>{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { ZhtsServer } from "@/api/installServer";
import MapCommon from "@/util/MapCommon";
@Component({
  name: "CrowdedPlace",
  components: {},
  mixins: [MapCommon]
})
export default class CrowdedPlace extends Vue {
  private listData: any = {
    hospital: {
      name: '医院',
      num: 0,
      bg: 'hospital',
      bg_no: 'hospital_no',
      id: 'hospital',
      iconName:'icon-hospital'
    },
    school: {
      name: '学校',
      num: 0,
      bg: 'school',
      bg_no: 'school_no',
      id: 'school',
      iconName:'icon-school'
    },
    development: {
      name: '社区',
      num: 0,
      bg: 'community',
      bg_no: 'community_no',
      id: 'development',
      iconName:'icon-community'
    },
    hotel: {
      name: '酒店',
      num: 0,
      bg: 'hotel',
      bg_no: 'hotel_no',
      id: 'hotel',
      iconName:'icon-hotel'
    },
    railwaystation: {
      name: '火车站',
      num: 0,
      bg: 'train',
      bg_no: 'train_no',
      id: 'railwaystation',
      iconName:'icon-train'
    },
    airport: {
      name: '机场',
      num: 0,
      bg: 'fly',
      bg_no: 'fly_no',
      id: 'airport',
      iconName:'icon-fly'
    },
    market: {
      name: '商场',
      num: 0,
      bg: 'market',
      bg_no: 'market_no',
      id: 'market',
      iconName:'icon-market'
    },
  };
  private checked: number = -1;
  private districtCode: string = "110000";
  private MapComp: any;
  public cleardata() {
    this.checked = -1;
    this.MapComp.removePointLayer();
  }

  private handleIco(index: number, item: any) {
    if (this.checked === index) {
      this.checked = -1;
      this.$store.dispatch("ZhtsModule/setQunyiqingType", '' );
      this.MapComp.removePointLayer();
    } else {
      this.checked = index;
      this.MapComp.removePointLayer();
      this.$store.dispatch("ZhtsModule/setQunyiqingType", item.id );
      this.MapComp.addPointByType(this.districtCode, item.id);
    }
    // 清除另一組選中 杜志勛補充 2020/2/7
    this.$emit("fatherMethod", "hello");
  }

  private getCrowdedPlace() {
    ZhtsServer.getCrowdedPlace({
      districtCode: this.districtCode
    })
      .then((res: any) => {
        if (res.data.data) {
          const data = res.data.data.counts;
          this.$store.commit("ZhtsModule/setgetCrowdedPlace", data);
          this.handleListData(data);
        }
      })
      .catch((err: any) => console.log(err));
  }

  private handleListData(resData: any) {
    for (const key of Object.keys(resData)) {
      if (this.listData[key]) {
        this.listData[key].num = resData[key];
      }
    }
  }

  @Watch("$store.state.ZhtsModule.district")
  private getDistrict() {
    this.districtCode = this.$store.state.ZhtsModule.district.id;
    this.getCrowdedPlace();
  }

  private getComponent() {
    const self: any = this;
    const modules = self.$ioc.resolve("GISModules-map");
    const component = modules.eventSituation.getComponent("compresituation");
    return component;
  }

  private mounted() {
    (this as any).resolveMap("map").then(() => {
      this.MapComp = this.getComponent();
      this.MapComp.load();
    });
  }

  private created() {
    this.districtCode = this.$store.state.ZhtsModule.district.id;
    this.getCrowdedPlace();
  }
}
</script>
<style lang="less" scoped>
.CrowdedPlace {
  color: aliceblue;
}

.CrowdedPlace_title {
  margin-left: 28px;
  font-size: 20px;
  // font-weight: bold;
}

.CrowdedPlace_box {
  display: flex;
  // justify-content: space-evenly;
  flex-wrap: wrap;
  align-content: space-around;
  // height: 260px;
  padding: 0 20px 20px;
}

.CrowdedPlace_cont {
  width: 102px;
  height: 120px;
  text-align: center;
  // display: flex;
  // flex-direction: column;
  // justify-content: flex-end;
  position: relative;
  cursor: pointer;
  background: url("../../../assets/img/zhts/card.png") no-repeat 0 0;
  padding: 20px 10px;
  box-sizing: border-box;
  &.cur,
  &:hover {
    background-image: url("../../../assets/img/zhts/card_on.png");
    .CrowdedPlace-icon {
      background-image: url("../../../assets/img/zhts/icons_on.png");
    }
  }
  p {
    margin: 0;
    padding: 0;
  }
  .text {
    font-size: 16px;
    span {
      font-weight: bold;
      color: #22a8f1;
      font-size: 18px;
    }

    .spanColor {
      color: #c6a325;
      font-size: 18px;
    }
  }
}
.CrowdedPlace-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url("../../../assets/img/zhts/icons.png") no-repeat 0 0;
}
.icon-hotel {
  background-position: 0 0;
}
.icon-train {
  background-position: -44px 0;
}
.icon-fly {
  background-position: -88px 0;
}
.icon-hospital {
  background-position: -132px 0;
}
.icon-school {
  background-position: -176px 0;
}
.icon-community {
  background-position: -217px 0;
}
.icon-market {
  background-position: -259px 0;
}
</style>
